<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				perspective: 600px;
			}
			
			ul {
				width: 200px;
				height: 200px;
				margin: 100px auto;
				position: relative;
				transform-style: preserve-3d;
				
				transform: rotateY(0deg) rotateX(0deg);
			}

			li {
				width: 200px;
				height: 200px;
				font-size: 50px;
				line-height: 200px;
				text-align: center;
				list-style: none;
				position: absolute;
				top: 0;
				left: 0;
			}

			li:nth-child(1) {
				/* 左 */
				background: red;
				transform: rotateY(-90deg) translateZ(100px) ;
			}
				/* 右 */
			li:nth-child(2) {
				background: green;
				transform: rotateY(90deg) translateZ(100px) ;
			}
			
			  /* 上 */
			li:nth-child(3) {
				background: blue;
				transform: rotateX(90deg) translateZ(100px) ;
			}
				
				/* 下 */
			li:nth-child(4) {
				background: purple;
				transform: rotateX(-90deg) translateZ(100px) ;
			}
				
				/* 前 */
			li:nth-child(5) {
				background: yellow;
				transform: translateZ(100px);
			}

			li:nth-child(6) {
				background: pink;
				transform: translateZ(-100px) rotateX(180deg);				
				
			}
		</style>
	</head>
	<body>
		<!-- 
			3D转换模块
			2D是一个平面只有宽度和高度,没有厚度
			3D是一个立体,有宽度,高度,还有厚度
			例如：正方形、正方体
			默认情况下所有元素都是呈2D展现的
			和透视一样,想看到某个元素的3D效果,只需要给他的父元素设置一个transform-style: preserve-3d;
			默认值是transform-style:flat(2D显示)
					 
			注意点：
			后侧的设置
			1.如果ul绕X轴旋转需要看到四面全部都是正方向 
				transform: translateZ(-100px) rotateX(180deg);
			
			2.如果ul绕Y轴旋转需要看到四面全部都是正方向
			    transform: translateZ(-100px) rotateY(180deg);		 
			
		 -->
		<ul>
			<li>王</li>
			<li>小</li>
			<li>陈</li>
			<li>道</li>
			<li>明</li>
			<li>杨</li>
		</ul>
	</body>
</html>
